
 <template>
    <div id='index'>
        <transition mode="out-in">
            <div class="index-view">
                    <img class="pic" src="../images/redbg.png"  alt="">
                <div class="index-res">
                       <ul>
                           <li class="list">
                                <el-input class="inp" type="number" v-model="tel" :placeholder="placeholder"></el-input>
                           </li>
                           <li class="list list1">
                               <el-input class="inp" v-model='tpCode' placeholder="输入图片验证码"></el-input>
                               <div class="mr" v-text="yanzNum" @click.stop='tpclick'></div>
                          </li>
                           <li class="list list1">
                                <el-input class="inp" v-model='smsCode' maxlength="6" placeholder="输入手机验证码"></el-input>
                                <div class="mr" @click='getSmscode'>{{mstxt}}</div>
                                
                           </li>
                           <li class="list">
                                <el-input type="password" class="inp" v-model="pasw" :placeholder="placeholder1"></el-input>
                           </li>
                           <li class="list3">
                               <p>
                                   请输入正确的手机号码
                               </p>
                           </li>
                           <li class="list list1 list2 btn" style="line-height:50px;" @click="goTolink">
                            <!-- <div class="zhc">
                                
                            </div> -->
                                立即申请
                                <!-- <el-button  @click="goTolink">立即拿钱</el-button> -->
                                <!-- <div class="btn"><img src="../images/ljsq.png" height="48" width="200" alt=""></div> -->
                           </li>
                       </ul>
                <div class="index-footer1">
                    注册即表示同意<span>《用户注册协议》</span>
                </div>
                </div>
                 <!-- <div class="footer">
                     <img clas="footer-pic" src="../images/logomsg.png" width="133" height="37" alt="">
                 </div>    -->
            </div>
        </transition>
        <!-- show_modal_logout -->
         <alerts 
            :show='show_modal_logout'
            @close='goDownload'
            @confirmss='goDownload'
            title='提示'
            tips='放款快,费率低,立马有钱花！'></alerts>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modal from '../components/Modal.vue'
    import alerts from '../components/Alert.vue'
    import verificationCode from '../components/VerificationCode.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { getScript, rules, getOS } from '../utils/utils'
    import { loginValidation } from '../validation/validation'
    import { allApi, loginApi, contactApi, loanInApi, loanOutApi, userApi, payApi } from '../api/api'


    export default {
        components:{
            verificationCode,
            alerts,
        },
        methods:{
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setUserInfo',
                'setNeedLogin',
            ]),
            tpclick(){
                if(this.tel == ''){
                    this.error_tel = '手机号码不能为空'
                    //this.placeholder="手机号码不能为空"
                    this.setMsgTip({
                        text:'请先输入手机号码',
                        type:'warn'
                    })
                    return
                }
                if(this.tel && !rules.tel(this.tel)){
                    this.error_tel = '请输入正确的手机号码'
                    this.setMsgTip({
                        text:'请输入正确的手机号码',
                        type:'warn'
                    })
                    this.tel=""
                    return
                }
                this.ynum()
            },
            ynum(){
                this.yanzNum=parseInt(Math.random()*(10000-999+1)+999)
            },
            onTouchMove(inFlag) {
                if (inFlag) {
                    document.addEventListener('touchmove', this.onHandler, false);
                } else {
                    document.removeEventListener('touchmove', this.onHandler, false);
                }
            },
            onHandler(e) {
                e.preventDefault();
            },
            getSmscode(){
                /*if(!this.idtp){
                    this.setMsgTip({
                        text:'您的图片验证码有误',
                        type:'warn'
                    })
                    return
                }*/
                if(this.mstxt=="获取验证码"){
                    this.countDown()
                     userApi.sendSms({
                        userPhone:this.tel,
                        platform:'H5',
                    })
                    .then(result=>{
                        this.smsCode = result
                    })
                    .catch(error => {
                        console.error(error)
                        this.sent = false
                    })
                    this.sent = true
                }
            },
            verification(type){
                this.passed = true
                this.error_tel = ''
                this.error_smsCode = ''
                this.error_password = ''
            },
            countDown(){
                setTimeout(()=>{
                    if(this.second == 1){
                        this.sent = false
                        this.second = 30
                        this.mstxt="获取验证码"
                        return
                    }
                    this.second --
                    this.mstxt = `${this.second}秒后重新发送`
                    this.countDown()
                },1000)
            },
            goTolink(){
                  if(this.tel == ''){
                    this.error_tel = '手机号码不能为空'
                    //this.placeholder="手机号码不能为空"
                    this.setMsgTip({
                        text:'请先输入手机号码',
                        type:'warn'
                    })
                    return
                }
                if(this.tel && !rules.tel(this.tel)){
                    this.error_tel = '请输入正确的手机号码'
                    this.setMsgTip({
                        text:'请输入正确的手机号码',
                        type:'warn'
                    })
                    this.tel=""
                    return
                }
                if(this.tel == ''){
                    this.error_tel = '手机号码不能为空'
                    //this.placeholder="手机号码不能为空"
                    this.setMsgTip({
                        text:'请先输入手机号码',
                        type:'warn'
                    })
                    return
                }
                if(this.tel && !rules.tel(this.tel)){
                    this.error_tel = '请输入正确的手机号码'
                    this.setMsgTip({
                        text:'请输入正确的手机号码',
                        type:'warn'
                    })
                    this.tel=""
                    return
                }
                /*if(!this.tpCode){
                    this.setMsgTip({
                        text:'请输入图片验证码',
                        type:'warn'
                    })
                    return
                }*/
                if(!this.smsCode){
                    this.setMsgTip({
                        text:'请输入手机验证码',
                        type:'warn'
                    })
                    return
                }
                if(!this.pasw){
                    this.setMsgTip({
                        text:'请输入密码',
                        type:'warn'
                    })
                    return
                }
                if(this.pasw&&!rules.password(this.pasw)){
                    this.setMsgTip({
                        text:'请输正确的密码',
                        type:'warn'
                    })
                    this.pasw=""
                    return
                }
                loginApi.checkUserByMobile({userPhone: this.tel}).then(data => {
                    if(data.isRegister === 1) {
                        // 调用login
                        /*allApi.log({
                            e_n:'c_login',
                            e_v:{
                                value:this.tel
                            }
                        })*/

                        let params = {
                            userPhone:this.tel,
                            phoneCode:this.smsCode,
                            userPwd:this.pasw,
                        }

                        loginApi.login(params)
                        .then(result=>{
                            console.log(result)
                            this.setSessionId(result.sessionId)
                            this.setUserInfo(result)
                            this.setNeedLogin(false)
                            
                            this.show_modal_logout=true;
                            this.error_tel = ''
                            this.error_smsCode = ''
                            this.error_password = ''
                        })
                        .catch(error => {
                            console.error(error)
                        })
                    } else {
                        let params = {
                            userPhone:this.tel,
                            phoneCode:this.smsCode,
                            userPwd:this.pasw,
                        }
                        // 调用regist
                        console.info(loginApi)
                        loginApi.register(params)
                        .then(data => {
                            this.show_modal_logout=true;
                            this.error_tel = ''
                            this.error_smsCode = ''
                            this.error_password = ''
                        }).catch(e => {
                            console.error(e)
                        })
                    }
                })
            },
            goDownload() {
                if (getOS() == "iOS") {
                    this.urlmsg=true
                    window.location.href="https://tbgjfile.9ijie.com/gw/ios/index.html" 
                } else if (getOS() == "Android") {
                    this.urlmsg=true
                    window.location.href="https://tbgjfile.9ijie.com/gw/android/index.html" 
                }
            }
        },
        data() {
            return {
                input:"",
                smsCode:"",
                tel:'',
                smsCode:'',
                second:30,
                sent:false,
                inst:{},
                info:{},
                show_captcha:true,
                validate:'',
                error_smsCode:"",
                reSend:'30秒后重新发送',
                mstxt:"获取验证码",
                placeholder:"请输入您的手机号",
                show_modal_logout:false,
                urlmsg:false,
                placeholder1:"请输入密码(6-18字母数字组合)",
                yanzNum:"",
                pasw:"",
                tpCode:"",
                idtp:"",
            }
        },
        computed:{
             telPass(){
                return rules.tel(this.tel)
            }
            
        },
        created(){
            this.ynum();
            $(".pic").height($('body')[0].scrollHeight)
            $('body').height($('body')[0].clientHeight);
            //this.onTouchMove(true);//禁用
            //document.activeElement.scrollIntoView(false);
           /* var originalHeight=document.documentElement.clientHeight || document.body.clientHeight;  
            $('body').height(originalHeight)
            //console.info("原始窗口的高度"+originalHeight);  
            window.onresize=function(){  
                var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;  
                //console.info("软键盘弹起后窗口的高度"+resizeHeight);  
                if(resizeHeight<originalHeight){  
                      //证明窗口被挤压了
                      //alert("证明窗口被挤压了")
                      resizeHeight=originalHeight
                      $('body').height(originalHeight)
                 }
            }*/
        },
        /*watch:{
            tpCode:{  
                handler:function(val,oldval){  
                    console.log(val.length)  
                    if(val.length>=4){
                        if(val!=this.yanzNum){
                            this.setMsgTip({
                                text:'您的图片验证码有误',
                                type:'warn'
                            })
                            this.idtp=false;
                        }else{
                            this.idtp=true;
                        }
                    }
                },  
                deep:true//对象内部的属性监听，也叫深度监听  
            },  
        }*/
    }
</script>
<style>
    .inp {
        border-radius: 8px;
    }

        
    
</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";

    #index{
        width:100%;
        height:100.1%;
        background: #1A1985;
        font-weight: normal;
        //background-attachment:fixed;
        //background-size:100% 100%;
        //height:auto;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
                overflow: hidden;
        font-size:16px;
        position: relative;
        //overflow: hidden;
        //z-index:-100;
        
    }
    .pic{
        width:100%;
        height:101.1%;
        position: absolute;
        z-index:1;
    }
    .top1{
        width:100%;
        height:44%;
    }
    .index-res{
        width:84.2%;
        position: absolute;
        z-index: 2;
        left:7%;
        top:44%;
        ul{
            position: relative;
        }
    }
    .title{
        width:100%;
        color:rgba(255,255,255,.7);
        font-weight: 600;
        font-size:24px;
        text-align:center;
        padding-top:35px;
        margin-bottom:30px;
    }
    .inp{
        position:relative;
        left:5%;
    }
    .list1{
        position: relative;
    }
    /* .mr:after{
       content: "  ";
      position: absolute;
      left: 0;
      top: 0;
      z-index:-1;
      width: 200%;
      height:200%;
      border:1px solid #fff;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(.5, .5);
      transform: scale(.5, .5);
    } */
    .list{
        width:100%;
        height:50px;
        position:relative;
        margin-top:10px;
    }
    .mr{
        float:right;
        width:113px;
        position: absolute;
        right:0;
        top:10px;
        line-height: 30px;
        font-size: 15px;
        height:30px;
        text-align:center;
         color:#191986;
         font-weight: normal;
        margin-right:5%;
        border:0;
        border-left: 1px solid #1A1985; 
        box-shadow: 0 0px 0px #fff; 
    }
     .list2{
        margin-top:21px;
        position: relative;
    }
    .list3{
        color:#FFFFFF;
        font-size: 14px;
        position: relative;
        left: 10%;
        top:10px;
    }
    .index-view{
        width:100%;
        height:101%;
        position: relative;
       // overflow-x:hidden; 
        overflow-y:scroll;
        /*//overflow-y:hidden;
        box-sizing:border-box;
        -moz-box-sizing:border-box; Firefox
        -webkit-box-sizing:border-box; Safari */
    }
    .index-view .index-footer1{
        font-size:13px;
        color:#fff;
        width:100%;
        text-align:center;
        background-color:0;
        margin-top:15px;
        margin-bottom: 10px;
    }
    .zhc{
        width:90%;
        height:21px;
        margin-left:5%;
        border-radius: 8px 8px 0 0;
        position: absolute;
        background:#fff!important;
        opacity: 0.5;
    }
    .footer img{
        position: relative;
        left:50%;
        margin-left: -66px;
        top:18px;
    }
    .btn{
        width: 90%;
        height: 50px;
        margin-left:5%;
        color:#5e3700;
        font-size:23px;
        //background: url('../images/btnbg.png') no-repeat left top;
        //background-size: 100% 100%;
        background: #ffe200;
        text-align: center;
        border-radius: 8px;
        font-weight:normal;
        text-align: center;
        //line-height: 50px;
        img{
            width:100px;
            height:24px;
            margin-top: 13px;
        }
    }
   
</style>
